import React from "react";
import { Card } from 'antd';
//redux
import Redux01 from "./redux/redux01"

//react-redux
import Reacxt01 from "./react-redux/reactx01"
import Reacxt02 from "./react-redux/reactx02"
import Reacxt03 from "./react-redux/reactx03"
import Reacxt04 from "./react-redux/reactx04"
import Reacxt05 from "./react-redux/reactx05"

//redux-thunk

import reduxThunk01 from "./redux-thunk/reduxThunk01"

import { BrowserRouter as Router, Route, Switch, NavLink } from "react-router-dom";
class RouterList extends React.Component {
  render() {
    return (
      <div className="router">
        <Router>
          <div className="margin_left_sm">
            <h2>Redux</h2>
            <ul className="nav2">
              <p>redux</p>
              <li><NavLink activeClassName="selected" to="/redux/redux01">redux 基本操作</NavLink></li>
              <br/>
              <p>react-redux</p>
              <li><NavLink activeClassName="selected" to="/redux/reactx01">react-redux 读取数据</NavLink></li>
              <li><NavLink activeClassName="selected" to="/redux/reactx02">react-redux 修改数据</NavLink></li>
              <li><NavLink activeClassName="selected" to="/redux/reactx03">react-redux 修改数据--提出常量--传递参数</NavLink></li>
              <li><NavLink activeClassName="selected" to="/redux/reactx04">react-redux redux合并</NavLink></li>
              <li><NavLink activeClassName="selected" to="/redux/reactx05">react-redux 中间件--applyMiddleware</NavLink></li>
              <br/>
              <p>redux-thunk</p>
              <li><NavLink activeClassName="selected" to="/redux/reduxThunk01">redux-thunk--处理异步</NavLink></li>
            </ul>
          </div>

          <hr />
          <div className="padding_h_sm margin_top_lg">
            <Card style={{ background: '#ECECEC' }}>
              <Switch>
                <Route path="/redux/redux01" component={Redux01}></Route>

                <Route path="/redux/reactx01" component={Reacxt01}></Route>
                <Route path="/redux/reactx02" component={Reacxt02}></Route>
                <Route path="/redux/reactx03" component={Reacxt03}></Route>
                <Route path="/redux/reactx04" component={Reacxt04}></Route>
                <Route path="/redux/reactx05" component={Reacxt05}></Route>
                <Route path="/redux/reduxThunk01" component={reduxThunk01}></Route>
                
              </Switch>
            </Card>
          </div>

        </Router>
      </div>
    );
  }
}

export default RouterList;
